<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('纪检风采列表')"/>
</head>

<style>

    /*下边距*/
    .my_margin {
        margin-bottom: 40px;
    }

    /*图片填满父容器*/
    img {
        width: 358.79px;
        height: 358.79px;
        object-fit: cover;
    }

</style>


<body class="gray-bg">
<div class="wrapper wrapper-content fadeInRight animated">
    <input id="demeanorCategory" th:value="${demeanorCategory}" hidden />
    <input id="hasMore" value="true"  hidden />
    <div class="row" id="fragment-demeanor">
        <div class="col-sm-12" th:fragment="fragment-demeanor">
            <div class="col-sm-4 my_margin" th:each="demeanorArrange : ${list}"
                 th:onclick="detail([[${demeanorArrange.arrangeId}]])" th:id="${demeanorArrange.arrangeId}">
                <div class="ibox-title">
                    <h3> [[${demeanorArrange.demeanorTitle}]] </h3>
                </div>
                <div class="ibox-content">
                    <img border="0" th:src="${demeanorArrange.picturePath}" alt="picture">
                </div>
            </div>

        </div>

    </div>
</div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    var limit = 6;
    var offset = 0;
    var isEnd = false;
    $(document).ready(function () {

        //到结尾, 不再请求
        if (isEnd) {
            return
        }

        //第一次加载
        // loadMore(true);
        //滚动时加载
        $(window).scroll(function () {

            //当滚动到最底部以上1像素时，加载新内容
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 1) {
                loadMore();
            }
        });
    });

    function loadMore() {
        offset += limit;
        let url = '/demeanor/arrange/personal/page?demeanorCategory=' + $("#demeanorCategory").val() + "&limit=" + limit + "&offset=" + offset + "&fragment=fragment-demeanor";
        $.ajax({
            url: url,
            method: "get",
            success: function (data) {
                console.log(data);
                let length = JSON.stringify(data).length;
                console.log(length);
                //没有更多的数据要加载
                if (length <= 70) {
                    isEnd = true;
                    return;
                }
                $("#fragment-demeanor").append(data);
            }
        });
    }

    function detail(progressId ){
        let url = "/demeanor/arrange/personal/detail/" + progressId;
        $.modal.openTab("详情",url);
    }


</script>
</body>
</html>